<template>
	<view class="warningcontrol-detail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="sel-wrap">
			<view :class="selVal==1?'active inventory':'inventory'" @click="change1">预警详情</view>
			<view :class="selVal==2?'active inventory':'inventory'" @click="change2">管控企业</view>
		</view>
		<!-- 预警详情 -->
		<template v-if="selVal==1">
			<view class="warning-detail">
				<view class="msg-title">
					<view class="title">最新发布：{{warningDetail?.notice?.title}}</view>
					<view class="unit">
						<image
							src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/huanbaoju-logo.png"
							mode=""></image>
						<view class="name-time">
							<view class="name">{{warningDetail?.notice?.publisher}}</view>
							<view class="time-issue">
								<view class="issue">发布</view>
								<view class="time">{{warningDetail?.notice?.publishdate}}</view>
							</view>
						</view>
					</view>
					<view class="manage-time">管控时间：{{warningDetail?.notice.monitortimestr}}</view>
				</view>
				<view class="enterprise-total">
					<view class="manage-enterprise">
						<view class="name">管控企业数</view>
						<view class="val">{{warningDetail.num_enterprise_all}}</view>
					</view>
					<view class="execute-enterprise">
						<view class="name">已执行企业</view>
						<view class="val">{{warningDetail.num_enterprise_follow}}</view>
					</view>
					<view class="no-execute-enterprise">
						<view class="name">未执行企业</view>
						<view class="val">{{warningDetail.num_enterprise_unfollow}}</view>
					</view>
				</view>
				<view class="warning-msg">
					<view class="title">
						<view class="line"></view>
						<text>内容详情</text>
					</view>
					<view class="msg" v-html="warningDetail.notice.content"></view>
				</view>
			</view>


		</template>
		<!-- 管控企业 -->
		<template v-if="selVal==2">

			<view class="control-enterprise">
				<view class="search-wrap">
					<view class="ipt-wrap">
						<view style="margin-left: 10rpx;">
							<uni-data-picker style="width: 100%;" placeholder="区域" v-model="queryParams.district"
								class="data-picker" popup-title="请选择所在地区" :localdata="dataTree" @change="sessionChange">
							</uni-data-picker>
						</view>
						<view class="line">

						</view>

						<view style="width: 120rpx;">
							<uni-data-select placeholder="状态" style="width: 90rpx;" v-model="queryParams.status"
								:localdata="statusList" :clear="true"></uni-data-select>
						</view>

						<view class="line">

						</view>
						<input type="text" placeholder="请输入企业名称" v-model="queryParams.customername"
							placeholder-class="ipt-class" />

					</view>
					<button @click="getList">查询</button>
				</view>
				<view class="unit-total">
					共 <text>{{total}}</text> 个单位
				</view>
				<view class="list">
					<noData v-if="dataList.length==0" />
					<view class="item" v-for="item in dataList" :key="item.id">
						<view class="name">
							企业名称：{{item.customername}}
						</view>
						<view class="inform">
							是否收到通知：{{item.readflag ==1?'已查看':'未查看'}}
						</view>
						<view class="report">
							<view class="name">
								是否执行并上报：
							</view>
							<view class="status"
								:style="item.followflag==1?'background:#CEE3FE;color:#4D9BFB':'background:#FFCCCC;color:#FF0B0B'">
								{{item.followflag==1?'已执行':'未执行'}}
							</view>
						</view>
						<view class="phone">手机号：{{item.hbmobile}}</view>
						<view class="admin">环保管理员：{{item.hbperson}}</view>
						<view class="address">地址：{{item.customeraddress}}</view>
					</view>
				</view>
			</view>




		</template>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index.js'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let name = ref("黄色预警")
	let selVal = ref('1')
	let dataTree = ref()
	let statusList = ref()
	let total = ref('')
	let warningDetail = ref({})

	let id = ref('')
	let queryParams = reactive({
		devicetype: ''
	})
	let single = ''
	let dataList = ref([])
	onLoad((e) => {
		id.value = e.id
		let color = e.color
		if (color == 1) {
			name.value = '红色预警'

		} else if (color == 2) {
			name.value = '橙色预警'
		} else if (color == 3) {
			name.value = '黄色预警'
		}
		http({
			url: '/notice/noticeSumDetail',
			data: {
				id: e.id
			}
		}).then((res) => {
			if (res.code == 0) {
				warningDetail.value = res.data
			}
		})
		getList()
	})
	let change1 = () => {
		selVal.value = 1

	}

	let change2 = () => {
		selVal.value = 2

	}

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}


				}
			}
			return item

		})

	}
	let jumpDetail = (num, id) => {

		uni.navigateTo({
			url: `/homePageOther/enterprisecontrol/enterprisecontrol?type=${num}&id=${id}`
		})
	}
	let sessionChange = (e) => {

		let id = e?.detail?.value[e.detail.value.length - 1]?.value

		queryParams.district = id
	}
	let getList = () => {
		http({
			url: '/admNoticeEnterprise/getRecvEnterpriseList',
			data: {
				noticeid: id.value,
				...queryParams
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
				total.value = res.data.total
			}

		})
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B06'
		}
	}).then((res) => {
		if (res.code == 0) {

			statusList.value = res.data.map((item) => {
				return {
					value: item.id,
					text: item.name
				}
			})
		}
	})
	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)
			dataTree.value = data



		}

	})
</script>
<!-- #CEE3FE -->
<style lang="scss" scoped>
	:deep(.text-color) {

		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.uni-select) {
		border: none !important;


		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.icon-calendar) {
		display: none;
	}

	:deep(.uni-select__input-placeholder) {
		font-weight: 400 !important;
		font-size: 25rpx !important;
		color: #333333 !important;
	}

	:deep(.selected-area) {

		font-weight: 400 !important;
		font-size: 25rpx !important;
		color: #333333 !important;

	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	:deep(.arrow-area) {
		margin-bottom: 0rpx;
	}

	:deep(.input-value-border) {
		min-width: 120rpx;
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	.warningcontrol-detail {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		/* 管控企业 */
		.control-enterprise {
			height: calc(100vh - 160rpx - 100rpx);
			background-color: #F0F2F5;
			display: flow-root;

			.list {
				height: calc(100vh - 160rpx - 290rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: auto;

				.item:first-child {
					margin-top: 0 !important;
				}

				.item {
					flex-shrink: 0;
					margin-top: 30rpx;
					width: 707rpx;
					height: 404rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					padding-left: 40rpx;
					padding-top: 35rpx;
					padding-bottom: 35rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {

						font-weight: 500;
						font-size: 31rpx;
						color: #222222;

					}

					.inform {

						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

					}

					.report {
						display: flex;
						align-items: center;

						.name {

							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

						}

						.status {
							width: 79rpx;
							height: 35rpx;

							border-radius: 7rpx;

							padding: 7rpx;
							background: #FFCCCC;
							border-radius: 7rpx;

							text-align: center;

							font-weight: 500;
							font-size: 19rpx;
							color: #0874FA;

						}
					}



					.admin,
					.address,
					.phone {

						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

					}

				}
			}

			.unit-total {
				padding-left: 30rpx;
				font-weight: 400;
				font-size: 23rpx;
				color: #333333;
				margin-bottom: 20rpx;

				text {
					color: #0874FA;
				}
			}

			.search-wrap {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				margin-bottom: 22rpx;
				padding: 0 22rpx;
				justify-content: space-between;

				.ipt-wrap {
					width: 574rpx;
					height: 67rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					display: flex;
					align-items: center;

					input {

						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						padding-left: 20rpx;
						padding-right: 20rpx;
					}

					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						// margin-left: 8rpx;
						// margin-right: 8rpx;
					}
				}

				button {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;

				}
			}
		}

		/* 预警详情 */
		.warning-detail {
			height: calc(100vh - 160rpx - 100rpx);
			background-color: #F0F2F5;
			display: flow-root;
			overflow: auto;

			.warning-msg {
				width: 750rpx;
				height: calc(100vh - 160rpx - 300rpx - 270rpx);
				margin-top: 20rpx;
				background: #fff;
				padding-left: 30rpx;
				padding-top: 40rpx;

				.title {
					display: flex;
					align-items: center;

					.line {
						width: 8rpx;
						height: 29rpx;
						background: #0874FA;
						border-radius: 4rpx;
						margin-right: 12rpx;
					}

					text {

						font-weight: bold;
						font-size: 29rpx;
						color: #000000;

					}
				}

				.msg {

					font-weight: 400;
					font-size: 29rpx;
					color: #333333;
					margin-top: 37rpx;
					line-height: 52rpx;

				}
			}

			.enterprise-total {
				margin: 0 auto;
				width: 697rpx;
				height: 164rpx;
				background: #FFFFFF;
				border-radius: 21rpx;
				display: flex;
				align-items: center;
				padding: 0 60rpx;
				justify-content: space-between;



				.manage-enterprise,
				.execute-enterprise,
				.no-execute-enterprise {
					display: flex;
					flex-direction: column;
					align-items: center;

					.name {
						margin-bottom: 10rpx;
						font-weight: 400;
						font-size: 23rpx;
						color: #666666;
						line-height: 33rpx;
					}

					.val {

						font-weight: 400;
						font-size: 35rpx;
						color: #333333;

					}
				}

				.manage-enterprise {
					.val {
						color: #333333;
					}
				}

				.execute-enterprise {

					.val {
						color: #0874FA;
					}
				}

				.no-execute-enterprise {


					.val {
						color: #FF0000;
					}
				}
			}

			.msg-title {
				width: 750rpx;
				height: 259rpx;
				background-color: #fff;
				margin-top: 10rpx;
				padding-top: 30rpx;
				margin-bottom: 19rpx;

				.manage-time {

					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					padding-left: 28rpx;
					margin-top: 15rpx;
				}

				.title {

					font-weight: bold;
					font-size: 29rpx;
					color: #070707;
					padding-left: 30rpx;
				}

				.unit {
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					margin-top: 30rpx;



					image {
						width: 55rpx;
						height: 55rpx;
					}

					.name-time {
						padding-left: 10rpx;

						.name {

							font-weight: 500;
							font-size: 24rpx;
							color: #070707;

						}

						.time-issue {
							display: flex;
							align-items: center;

							.issue {
								width: 48rpx;
								height: 23rpx;
								text-align: center;
								line-height: 23rpx;
								background: #EEF2FF;
								border-radius: 6rpx;
								font-weight: 500;
								font-size: 14rpx;
								color: #0874FA;

							}

							.time {

								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
								line-height: 38rpx;
							}
						}
					}
				}
			}
		}

		.sel-wrap {
			height: 100rpx;
			background-color: #fff;
			padding: 0 204rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.inventory,
			.record {
				position: relative;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;

			}

			.active {
				position: relative;

				font-weight: bold;
				font-size: 30rpx;
				color: #000000;


				&:before {
					position: absolute;
					content: '';
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					bottom: -6rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

		}





	}
</style>